<template>
	<section>

    <!-- 新增或者编辑时弹出的对话框 -->
    <el-dialog title="部门信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-input v-model="form.sn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="请选择部门状态">
            <el-option label="禁用" value="-1"></el-option>
            <el-option label="启用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门上级分类" :label-width="formLabelWidth">
          <el-input v-model="form.dirPath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门管理人员" :label-width="formLabelWidth">
          <el-input v-model="form.manager_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级部门id" :label-width="formLabelWidth">
          <el-input v-model="form.parent_id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增以及高级查询框 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterCondition">
        <el-form-item>
          <el-input v-model="filterCondition.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="findByCondition">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 表格展示信息 -->
    <template>
      <el-table :cell-style="rowstyle" :header-cell-style="headerRowStyle" e :data="tablelist" highlight-current-row border v-loading="loading" style="width: 100%;" @selection-change="selsChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="80" label="编号"></el-table-column>
          <el-table-column prop="name" label="部门名称" width="150" sortable></el-table-column>
          <el-table-column prop="dirPath" label="部门上层分类" width="150" sortable></el-table-column>
          <el-table-column prop="sn" label="部门编号" width="150" sortable></el-table-column>
          <el-table-column prop="state" label="部门状态" width="150" :formatter="formatState" sortable></el-table-column>
          <el-table-column prop="manager_id" label="部门管理员id" width="150" sortable></el-table-column>
          <el-table-column prop="parent_id" label="上级部门id" width="150" sortable></el-table-column>
          <el-table-column label="操作" width="150">
            <template scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </template>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          align="center"
          :total="total">
      </el-pagination>
    </div>

	</section>
</template>
<script>

	import util from "../../common/js/util";
  import {addUser} from "../../api/api";

  export default {
		data() {
			return {
        tablelist: [],
        loading: true,
        total: 0,
        cPage: 1,
        pSize: 10,
        filterCondition:{
          name: "",
        },
        dialogFormVisible: false,
        form: {
          name:"",
          sn: "",
          dirPath: "",
          state: "",
          manager_id: "",
          parent_id: ""
        },
        formLabelWidth: "120px"
			}
		},
		methods: {
		  addSubmit() {
        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          this.dialogFormVisible = false;
          this.loading = true;
          //NProgress.start();
          console.log(this.form);
          let para = this.form;
          this.$http.put("/api/department", para)
            .then(res => {
              let {msg, success} = res.data;
              if (success) {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                });
              } else {
                this.$message.error('添加失败,原因是' + msg);
              }
              this.display();
            })
            .catch(() => {
              this.$message.error("网络异常,请确认相关配置是否正确");
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });
        })

      },

      // 点击查询触发,高级查询方法
      findByCondition() {
        this.loading = true;
        let findData = {cPage: this.cPage, pSize: this.pSize, name: this.filterCondition.name};
        this.$http.post("/api/department", findData)
          .then(res => {
            this.tablelist = res.data.data;
            this.total = res.data.total;
            this.loading = false;
          })
          .catch(() => {
            this.$message.error("网络异常,请确认相关配置是否正确");
          })
      },
      // 点击新增触发,新增方法
      handleAdd() {
        this.form = {name:"", sn: "", dirPath: "", state: "", manager_id: "", parent_id: ""}
        this.dialogFormVisible = true;
      },

		  // 点击编辑触发,编辑方法
      handleEdit(index, row) {
        console.log(index, row);
      },
      // 点击删除触发方法,进行删除
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$http.delete('/api/department/' + row.id)
            .then(res => {
              console.log(res);
              let {msg, success} = res.data;
              if (success) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              } else {
                this.$message.error('删除失败,原因是' + msg);
              }
              this.display();
            })
            .catch(() => {
              this.$message.error("网络异常,请确认相关配置是否正确");
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 改变页面显示条数触发
      handleSizeChange(val) {
        this.pSize = val;
        this.display();
      },
      // 改变当前显示页触发
      handleCurrentChange(val) {
        this.cPage = val;
        this.display();
      },
		  // 前面选择框改变触发事件绑定的方法
      selsChange: function (sels) {
        this.sels = sels;
      },
      // 将表格体内容居中显示
		  rowstyle() {
        return "text-align:center"
      },
      // 将表头内容居中显示
      headerRowStyle() {
        return "text-align:center"
      },
      // 状态显示转换
      formatState: function (row, column) {
        return row.state == 0 ? "启用" : "禁用";
      },
      // 页面表格数据抓取刷新方法
      display() {
        this.$http.post("/api/department", {cPage : this.cPage, pSize : this.pSize}).then(res => {
          this.tablelist = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        })
      }
		},
		mounted() {
      this.display();
		}
	};

</script>

<style scoped>

</style>